<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生列表</title>
</head>
<body>
<div id="container">
    <form id="queryForm">
           输入关键字：<input id="keyword" name="keyword"/>
        <input type="button" value="查询" id="cxBtn"/>
    </form>
    <table width="100%" border="1">
        <caption>学生列表</caption>
        <thead>
        <tr style="font-weight:bold;background:#a0a0ff">
                <td>学生编号</td>
                <td>学生姓名</td>
                <td>生日</td>
                <td>性别</td>
                <td>电话</td>
                <td>邮箱</td>
                <td>班级编号</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>
            <tr v-for="detail in page.list">
                <td>{{detail.id}}</td>
                <td>{{detail.sname}}</td>
                <td>{{detail.birthday}}</td>
                <td>{{detail.gender}}</td>
                <td>{{detail.telephone}}</td>
                <td>{{detail.email}}</td>
                <td>{{detail.classid}}</td>
                <td>
                    <a :href="'/admin/student/detail.html?id='+detail.id">查看</a>&nbsp;&nbsp;
                    <a :href="'/admin/student/update.html?id='+detail.id">修改</a>&nbsp;&nbsp;
                    <a href="javascript:;" @click="del(detail.id)">删除</a>
                </td>
            </tr>
        </tbody>
    </table>
    <!--<div class="page_nav">
        <ul>
            <li>共<span>{{page.totalCount}}</span>条数据</li>
            <li>第<span>{{page.pageNo}}</span>页&nbsp;/&nbsp;共<span>{{page.totalPageCount}}</span>页</li>
            <li><a href="">首页</a></li>
            <li><a href="">上页</a></li>
            <li><a href="">下页</a></li>
            <li><a href="">末页</a></li>
            <li>跳转至<input size="8" id="pageIndex" :value="page.pageNo"/><input type="button" class="pageBtn" value="跳转"/> </li>
        </ul>
    </div>-->
</div>
<script src="/js/jquery-1.12.4.js"></script>
<script src="/js/vue.js" type="text/javascript"></script>
<script>
    var tableBody = new Vue({
        el:"#container",
        data:{page:{}},
        mounted:function () {$.getJSON("/student/queryByPage.json",$("#queryForm").serialize(),function (data) {tableBody.page = data;});},
        methods:{
            del:function (id){
                $.post("/student/delete.json",
                    {id:id},
                    function(result){
                        if(result.flag==true){
                            fill("/student/query.json",$("form").serialize());
                            alert("删除成功");
                        }else{
                            alert("删除失败");
                        }
                    },"json");
            }
        }
    });

</script>
</body>
</html>